<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>当当网上书城</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
	<div class="topBar">
		<div class="topBarBox">
			<div class="topBarBoxL">欢迎来到当当网上书城！</div>
			<div class="topBarBoxR">
				<ul>
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
					<li class="second">
						<a href="#">我的当当</a>
						<ul class="secondUl">
							<li><a href="#">我的订单</a></li>
							<li><a href="#">购物车</a></li>
							<li><a href="#">积分抵现</a></li>
							<li><a href="#">我的收藏</a></li>
							<li><a href="#">我的余额</a></li>
							<li><a href="#">我的评论</a></li>
							<li><a href="#">礼券/礼品卡</a></li>
							<li><a href="#">电子书架</a></li>
						</ul>
					</li>
					<li class="second">
						<a href="#">客户服务</a>
						<ul class="secondUl">
							<li><a href="#">帮助中心</a></li>
							<li><a href="#">自助退换货</a></li>
							<li><a href="#">联系客服</a></li>
							<li><a href="#">我要投诉</a></li>
							<li><a href="#">意见建议</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div><!-- topBar顶部导航条 -->
	<div class="head">
		<div class="logo">
			<img src="images/logo.gif" alt="">
		</div><!-- logo商标 -->
		<div class="search">
			<form action="">
				<input type="text" placeholder="请输入关键字" />
				<input type="button" />
			</form>
		</div><!-- search搜索框 -->
		<div class="btn">
			<a href="#" class="carBtn">购物车<span>3</span></a>
			<a href="#" class="orderBtn">我的订单</a>
		</div>
		<div class="keyword">
			<a href="#">热搜：</a>
			<a href="#">凤囚凰</a>
			<a href="#">西风东土</a>
			<a href="#">食帖</a>
			<a href="#">绽放自我</a>
			<a href="#">亲近母语</a>
			<a href="#" class="heightSearch">高级搜索</a>
		</div><!-- keyword关键词 -->
		<div style="clear: both;"></div>
		<div class="headLine"></div>
	</div><!-- head头部导航区 -->
	<div class="ad"></div><!-- ad广告区 -->
	<div class="content">
		<div class="leftNav">
			<div class="leftNavTit">图书分类</div>
			<ul class="leftNavList">
				<li>
					<a href="#" class="first">教育</a>
					<a href="#">教材</a><span>|</span>
					<a href="#">外语</a><span>|</span>
					<a href="#">考试</a><span>|</span>
					<a href="#">中小学教辅</a>
				</li>
				<li>
					<a href="#" class="first">电子书</a>
					<a href="#">文艺</a><span>|</span>
					<a href="#">网络文学</a><span>|</span>
					<a href="#">当当出品</a><span>|</span>
					<a href="#">人文社科</a><span>|</span>
					<a href="#">经管励志</a><span>|</span>
					<a href="#">生活</a><span>|</span>
					<a href="#">童书</a><span>|</span>
					<a href="#">科技</a><span>|</span>
					<a href="#">教育</a><span>|</span>
					<a href="#">期刊杂志</a><span>|</span>
					<a href="#">多媒体少儿</a>
				</li>
				<li>
					<a href="#" class="first">小说</a>
					<a href="#">中国小说</a><span>|</span>
					<a href="#">外国小说</a>
				</li>
				<li>
					<a href="#" class="first">文艺</a>
					<a href="#">文学</a><span>|</span>
					<a href="#">传记</a><span>|</span>
					<a href="#">艺术</a><span>|</span>
					<a href="#">摄影</a>
				</li>
				<li>
					<a href="#" class="first">青春</a>
					<a href="#">青春文学</a><span>|</span>
					<a href="#">动漫</a><span>|</span>
					<a href="#">幽默</a>
				</li>
				<li>
					<a href="#" class="first">童书</a>
					<a href="#">科普/百科</a><span>|</span>
					<a href="#">图画书</a><span>|</span>
					<a href="#">文学</a><span>|</span>
					<a href="#">摄影</a>
				</li>
				<li>
					<a href="#" class="first">生活</a>
					<a href="#">休闲/爱好</a><span>|</span>
					<a href="#">孕产/胎教</a><span>|</span>
					<a href="#">烹饪/美食</a><span>|</span>
					<a href="#">时尚/美妆</a><span>|</span>
					<a href="#">旅游/地图</a><span>|</span>
					<a href="#">家庭/家居</a><span>|</span>
					<a href="#">亲子/家教</a><span>|</span>
					<a href="#">两性关系</a><span>|</span>
					<a href="#">育儿/早教</a><span>|</span>
					<a href="#">保健/养生</a><span>|</span>
					<a href="#">体育/运动</a><span>|</span>
					<a href="#">手工/DIY</a><span>|</span>
					<a href="#">风水/占卜</a>
				</li>
				<li>
					<a href="#" class="first">人文社会</a>
					<a href="#">历史</a><span>|</span>
					<a href="#">文化</a><span>|</span>
					<a href="#">古籍</a><span>|</span>
					<a href="#">心理学</a><span>|</span>
					<a href="#">哲学/宗教</a><span>|</span>
					<a href="#">政治/军事</a><span>|</span>
					<a href="#">社会科学</a><span>|</span>
					<a href="#">法律</a>
				</li>
				<li>
					<a href="#" class="first">经管</a>
					<a href="#">管理</a><span>|</span>
					<a href="#">投资理财</a><span>|</span>
					<a href="#">财经</a>
				</li>
				<li><a href="#" class="first">励志/成功</a></li>
				<li>
					<a href="#" class="first">科技</a>
					<a href="#">科普读物</a><span>|</span>
					<a href="#">建筑</a><span>|</span>
					<a href="#">医学</a><span>|</span>
					<a href="#">计算机/网络</a><span>|</span>
					<a href="#">农业/林业</a><span>|</span>
					<a href="#">自然科学</a><span>|</span>
					<a href="#">工业技术</a>
				</li>
				<li><a href="#" class="first">工具书</a></li>
				<li>
					<a href="#" class="first">英文原版书 港台图书</a>
					<a href="#">英文原版书</a><span>|</span>
					<a href="#">港台图书</a>
				</li>
				<li><a href="#" class="first">期刊</a></li>
			</ul>
		</div>
		<div class="banner">
			<div class="bannerImg">
				<img src="images/banner1.jpg" alt="">
				<img src="images/banner2.jpg" alt="">
				<img src="images/banner3.jpg" alt="">
				<img src="images/banner4.jpg" alt="">
				<img src="images/banner5.jpg" alt="">
				<img src="images/banner6.jpg" alt="">
				<img src="images/banner7.jpg" alt="">
				<img src="images/banner8.jpg" alt="">
			</div>
			<div class="number">
				<span class="on">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
				<span>6</span>
				<span>7</span>
				<span>8</span>
			</div>
		</div><!-- banner图片轮播 -->
		<div class="newState">
			<h2 class="newStateTit">最新动态</h2>
			<a href="#">《素食主义者》获2016国际布克奖</a>
			<a href="#">阅享频道：美国人重新发现的乾隆帝</a>
			<a href="#">心理学的故事，30年口碑相传,独家首发</a>
		</div><!-- 最新动态 -->
		<div class="newState">
			<h2 class="newStateTit">新书预售<a href="#" class="more">预售更多</a></h2>
			<div class="banner2">
				<ul class="banner2Box">
					<li class="line1">
						<a href="#"><img src="images/23964359-1_f_2.jpg" alt=""></a>
						<p class="name">[预售]一个·一套（韩寒主编一个书系8本完整结集。套装赠送韩寒、张皓晨、陈谌、方慧、姬霄、荞麦等16位畅销书作者独家私语纪念册）</p>
						<p class="price">
							<span class="rob">￥210.00</span>
							<span class="price_r">￥280.00</span>
						</p>
					</li>
					<li class="line2">
						<a href="#"><img src="" alt=""></a>
						<p class="name"></p>
						<p class="price"></p>
					</li>
					<li class="line3">
						<a href="#"><img src="" alt=""></a>
						<p class="name"></p>
						<p class="price"></p>
					</li>
					<li class="line4">
						<a href="#"><img src="" alt=""></a>
						<p class="name"></p>
						<p class="price"></p>
					</li>
					<li class="line5">
						<a href="#"><img src="" alt=""></a>
						<p class="name"></p>
						<p class="price"></p>
					</li>
				</ul>
			</div>
		</div>
	</div><!-- content中间内容区 -->
</body>
</html>